<script setup>
import { ref } from 'vue'
import operate from '../../api/operate'
import { useOperateLogListStore } from '../../store/operateLogList'
import { useSearchOperateLogStore } from '../../store/operateLog/searchOperateLog'
const searchOperateLogStore = useSearchOperateLogStore()
const operateLogListStore = useOperateLogListStore()

async function deleteOperation() {
    await operate.deleteOperation(operateLogListStore.selectedIds).then(res => {
        console.log(res)
    }).catch(res => {
        console.log(res)
    })
    await operate.getOperateLogList(operateLogListStore.pageNum, operateLogListStore.pageSize).then(res => {
        operateLogListStore.setOperateLog(res.data.data)
        operateLogListStore.total = res.data.total
        console.log(res.data.data)
    }).catch(err => {
        console.log(err)
    }).finally(() => {
        operateLogListStore.changeLoading()
    })
}

async function deleteOperationAll() {
    await operate.deleteOperationAll().then(res => {
    }).catch(err => {
        console.log(err)
    })
    await operate.getOperateLogList(operateLogListStore.pageNum, operateLogListStore.pageSize).then(res => {
        operateLogListStore.setOperateLog(res.data.data)
        operateLogListStore.total = res.data.total
        console.log(res.data.data)
    }).catch(err => {
        console.log(err)
    }).finally(() => {
        operateLogListStore.changeLoading()
    })
}

async function searchOperation() {
    await operate.getSpecieOperation(searchOperateLogStore.userName, searchOperateLogStore.ipAddress, searchOperateLogStore.operateType, searchOperateLogStore.Time,operateLogListStore.pageNum, operateLogListStore.pageSize).then(res => {
        operateLogListStore.setOperateLog(res.data.data);
        operateLogListStore.total = res.data.total
    }).catch(res => {
        console.log(res)
    }).finally(() => {
        operateLogListStore.changeLoading()
    })
}
</script>
<template>
    <div class="container">
        <div class="first-line">
            <div class="first-left">
                <div class="input-group">
                    <span class="label">操作地址：</span>
                    <el-input v-model="searchOperateLogStore.ipAddress" placeholder="请输入ip地址" clearable style="width: 240px;"></el-input>
                </div>
                <div class="input-group">
                    <span class="label">操作类型：</span>
                    <el-select clearable style="width: 240px;" v-model="searchOperateLogStore.operateType" placeholder="请选择">
                        <el-option label="新增" value="新增"></el-option>
                        <el-option label="更新" value="更新"></el-option>
                        <el-option label="删除" value="删除"></el-option>
                        <el-option label="导出" value="导出"></el-option>
                    </el-select>
                </div>
                <div class="input-group">
                    <span class="label">操作人员：</span>
                    <el-input v-model="searchOperateLogStore.userName" placeholder="请输入用户名称" clearable style="width: 240px;"></el-input>
                </div>
            </div>
        </div>
        <div class="second-line">
            <div class="second-left">
                <div class="input-group">
                    <span class="label">操作时间：</span>
                    <el-date-picker :style="{
                        width: windowWidth > 768 ? '500px' : '100%'
                    }" v-model="searchOperateLogStore.Time" type="daterange" range-separator="至" start-placeholder="开始日期"
                        end-placeholder="结束日期" value-format="YYYY-MM-DD HH:mm:ss"></el-date-picker>
                </div>
                <div class="button-group">
                    <el-button type="primary" @click="searchOperation">查询</el-button>
                    <el-button type="danger">重置</el-button>
                </div>
            </div>
        </div>
        <div class="third-line">
            <div class="third-left">
                <el-button :disabled="operateLogListStore.selectedIds.length == 0" type="warning"
                    @click="deleteOperation"><el-icon>
                        <Edit />
                    </el-icon>删除</el-button>
                <el-button type="danger" @click="deleteOperationAll"><el-icon>
                        <Delete />
                    </el-icon>清空</el-button>
                <el-button type="info"><el-icon>
                        <Bottom />
                    </el-icon>导出</el-button>
            </div>
        </div>
    </div>
</template>
<style scoped>
.container {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* 第一行样式 */
.first-line .first-left {
    display: flex;
    gap: 20px;
    align-items: center;
}

/* 第二行样式 */
.second-line .second-left {
    display: flex;
    gap: 20px;
    align-items: center;
}

.third-line .third-left {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}



.input-group {
    display: flex;
    align-items: center;
    gap: 8px;
}

.label {
    white-space: nowrap;
    font-size: 14px;
    color: #606266;
}



/* 调整日期选择器与按钮间距 */
.el-date-picker {
    margin-right: 20px;
}

.icon-search {
    cursor: pointer;
    padding: 8px;
    transition: color 0.3s;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.icon-search:hover {
    color: #409eff;
    /* Element Plus 主题色 */
}

@media (max-width: 768px) {
    .first-line .first-left {
        display: grid;
        gap: 0.5rem;
        align-items: center;
    }

    .second-line .second-left {
        display: grid;
        gap: 0.5rem;
        align-items: center;
    }
}
</style>